<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-监视属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>a的值是:{{a}}</h3>
        <button @click="a++">点我让a自加</button>
        <h3>b的值是:{{b}}</h3>
        <button @click="b++">点我让b自加</button>
        <h3>c的值是:{{c}}</h3>
        <button @click="c++">点我让b自加</button>
    </div>
    <script>
        Vue.config.productionTip = false

        let vm = new Vue({
            el: "#root", 
            data: {
                a: 1,
                b: 10,
                c: 100,
            },
            watch: {
                //完整写法
                a: {
                    handler(newValue, oldValue) {
                        console.log('a改变了 新值：', newValue, '旧值：', oldValue)
                    }
                },
                //当监视对象内只用到handler时可以简写成一个函数
                b(newValue, oldValue) {
                    console.log('b改变了 新值：', newValue, '旧值：', oldValue)
                }
            }
        })

        //另一种简写方法
        vm.$watch('c', function(newValue, oldValue){
            console.log('c改变了 新值：', newValue, '旧值：', oldValue)
        }) 
    </script>
</body>
</html>